<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>登录儿嬉合作伙伴</title>
      <script type="text/javascript">      
      //根据屏幕大小及dpi调整缩放和大小
      (function() {
          var scale = 1.0;
          var ratio = 1;
          if (window.devicePixelRatio >= 2) {
              scale *= 0.5;
              ratio *= 2;
          }
          var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale +', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />';
          document.write(text);
          document.documentElement.style.fontSize = 50*ratio + "px";
      })();  
      </script>
      <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />      
      <meta http-equiv="Pragma" content="no-cache" />      
      <meta http-equiv="Expires" content="0" />
      <link rel="stylesheet" href="./public/css/reset.css">
      <link rel="stylesheet" href="./public/css/common.css">
      <link rel="stylesheet" href="./public/css/bind.css">
  </head>
  <body>
    <div class="bind-page dn" id="loginPage">
      <section class="tab-header">
        <ul id="J_header">
          <li v-bind:class="{ 'active': current_tab == 1 }">输入手机号码</li>
          <li v-bind:class="{ 'active': current_tab == 2 }">输入验证码</li>
          <li v-bind:class="{ 'active': current_tab == 3 }">完成登录</li>
        </ul>
      </section>
      <form class="bindForm" action="index.html" method="post">
        <div class="tab-content" id="J_content">        
            <section class="tab"  v-show="current_tab == 1">
              <div class="cont">
                <div class="item-input">
                    <input type="tel" name="tel" placeholder="点此输入您的手机号码" v-model="tel"/>
                    <div class="clear-fork" v-bind:class="{'dn': !show_tel_clean}" v-on:click="cleanTelHandler"></div>  
                </div>
                <button type="button" class="button button-fill mt82" v-on:click="getCodeHandler(1)">获取验证码</button>
              </div>
              <div class="notice">
                <div class="notice-hd">
                  <span>提示</span>
                </div>
                <div class="notice-txt">
                  登录档口后可以 1.管理店铺  2.查看收入
                </div>
              </div>           
            </section>            
            <section class="tab" v-show="current_tab == 2">
                <div class="cont">
                  <div class="iptboox">
                    <div class="item-input">
                      <input type="tel" name="code" placeholder="点此输入验证码" v-model="vercode" />
                      <div class="clear-fork" v-bind:class="{'dn': !show_code_clean}" v-on:click="cleanCodeHandler"></div>
                    </div>                    
                  </div>                  
                  <button type="button" class="button button-fill mt82" v-on:click="bindHandler">确认登录</button>  
                  <button type="button" class="button mt30" v-on:click="changeTab(1)">上一步</button> 
                  <button type="button" class="getCode" v-bind:class="{'f_blue': isCanGet}" v-on:click="getCodeHandler">{{countDownText}}</button>
                </div>
                <div class="notice">
                  <div class="notice-hd">
                    <span>提示</span>
                  </div>
                  <div class="notice-txt">
                    登录档口后可以 1.管理店铺  2.查看收入
                  </div>
                </div>
            </section>
            
            <section class="tab res" v-show="current_tab == 3" > 
                <div class="cont">
                <div v-if="fail_msg == ''" id="J_bind_succ">
                  <div class="succ-icon"></div>
                  <div class="succ-note">
                    恭喜您，帐号登录成功！
                  </div>
                </div>  
                <div v-else id="J_bind_fail">
                  <div class="succ-icon fail-icon"></div>
                  <div class="succ-note fail-txt">
                    很遗憾，账号登录失败！
                    <p style="margin-top: .3rem; font-size: .3rem;">{{fail_msg}}</p>
                  </div>
                </div>
                <div class="binded-tel" id="J_tel_txt" v-if="fail_msg == ''">
                  您登录手机号是{{ tel | hide}}
                </div>
                <div class="rebind">
                  <a href="#" @click.prev.stop="rebindHandler" id="J_go_first">点击重新登录</a>
                </div>   
                </div>           
            </section>          
        </div>
      </form>
      <div class="toast" v-if="error.show_error">
        <div class="toast_cont">{{error.msg}}</div>
      </div>
    </div>    
    <script type="text/javascript" src="./public/js/lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="./public/js/lib/vue.min.js"></script>
    <script type="text/javascript" src="./public/js/src/md5.js"></script>
    <script>
      var links = ['./public/js/src/global.js', './public/js/src/index.js']
      links.forEach(function(item) {
        document.write('<script type="text/javascript" src="' + item +'?ver=' + Math.random() +'"><\/script>')
      })
    </script>
  </body>
</html>
